@import "../../assets/styles/variables.scss";

.nav {
  max-height: calc(100% - 80px);
  box-shadow: 0 8px 10px 0 rgb(183 192 206 / 10%);
  background: $primaryBg;
  overflow: hidden;
  top: calc(#{$headerHeight});
  width: $navbarWidth;
  height: calc(100vh - #{$headerHeight});
  position: fixed;
  grid-area: n;
  padding: 25px 15px;

  div {
    margin-bottom: 40px;

    a {
      position: relative;

      &:before {
        content: "";
        position: absolute;
        top: 0;
        left: -10px;
        width: 2px;
        height: 0;
        background-color: $primaryColor;
        -webkit-transition: 0.4s;
        transition: 0.4s;
        opacity: 0;
        visibility: hidden;
      }

      span {
        background-color: #F4F7FC;
        height: 30px;
        width: 30px;
        border-radius: 8px;
        padding: 8px;
        margin-right: 8px;
        transition: 0.4s;
      }
    }

    &:hover a span {
      background-color: #e3eeff;
    }
  }
}